<template>
  <el-container class="layout-container-demo" v-if="wmsGlobal.isLogin">
    <base-side :isCollapse="isCollapse" class="base-side" style="height:100vh;"/>
    <el-container>
      <el-header height="90px">
        <wms-header :collapse="collapse"></wms-header>
      </el-header>
    
      <el-main>
        <el-card class="box-card">
          <router-view v-slot="{ Component }">
            <keep-alive :include="keepAlive.caches">
              <component :is="Component"/>
            </keep-alive>
          </router-view>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
  <login v-else></login>
  <el-dialog v-model="wmsGlobal.dialogVisible" draggable width="80%">
    <search-client @close="wmsGlobal.search.searchCloseClients" ref="searchClientRef" v-show="wmsGlobal.search.name === 'clients'"></search-client>
    <search-goods  @close="wmsGlobal.search.searchCloseGoods" ref="searchGoodsRef" v-show="wmsGlobal.search.name === 'goods'"></search-goods>
    <search-store  @close="wmsGlobal.search.searchCloseStore" ref="searchStoreRef" v-show="wmsGlobal.search.name === 'store'"></search-store>
  </el-dialog>
</template>
<script setup name="App">
// import { Search,Avatar,Bell } from '@element-plus/icons-vue'
import { ref,watch } from "vue";
import { useRouter } from "vue-router";
import wmsHeader from './components/layouts/Header.vue'
import { useKeepAlive } from '@/store/keepAlive'
import { useWmsGlobal } from '@/store/wmsGlobal'
import login from '@/components/layouts/login.vue'
import searchClient from '@/components/search/searchClient.vue'
import searchGoods from '@/components/search/searchGoods.vue'
import searchStore from '@/components/search/searchStore.vue'
const keepAlive = useKeepAlive();
const wmsGlobal = useWmsGlobal();
const searchClientRef = ref();
const searchGoodsRef = ref();
const searchStoreRef = ref();
watch(searchClientRef, (newValue, oldValue) => {
    wmsGlobal.search.searchClientRef = newValue;
})
watch(searchGoodsRef, (newValue, oldValue) => {
    wmsGlobal.search.searchGoodsRef = newValue;
})
watch(searchStoreRef, (newValue, oldValue) => {
    wmsGlobal.search.searchStoreRef = newValue;
})
const isCollapse = ref(false);
// const isLogin = ref(false)
// const succeed = ()=>{
//   isLogin.value = true
// }
const collapse = () => {
  isCollapse.value = !isCollapse.value;
};
const router = useRouter()
router.push("/")
router.beforeEach((to, from) => {
  if(!to.name)return;
  if(to.name === '主页')return;
  if(!keepAlive.caches.includes(to.name)){
    keepAlive.caches.push(to.name)
    keepAlive.AddTags(to)
    keepAlive.toTag(to)
  }else{
    keepAlive.toTag(to)
  }
})
</script>


















<style scss scoped>
.layout-container-demo .el-header {
  /* position: relative; */
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
  background-color: white;
  box-shadow: var(--el-box-shadow-light);
  
  /* margin: 10px;
  box-shadow: 1px 1px 1px black; */
}
.layout-container-demo .base-side {
  /* color: var(--el-text-color-primary); */
  /* background: var(--el-color-primary-light-8); */
  background-color: #545c64;
  /* box-shadow: var(--el-box-shadow); */
  /* margin-right: 10px;
  margin-top: 10px;
  box-shadow: 3px 3px 3px black; */
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.box-card {
  margin: 10px;
  /* box-shadow: var(--el-box-shadow); */
}

</style>
